<script setup lang="ts">
import { patientConsultOrderDetailOrderIdAPI } from '@/api/message';
import { io } from 'socket.io-client';
import useBuLing from '@/hooks/useBuLing';
import { computed, onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import comIcon from '@/components/common/com-icon/com-icon.vue';
import comNavigation from '@/components/common/com-navigationBar/com-navigation.vue';
import comScrollView from '@/components/common/com-scrollView/com-scrollView.vue';
const route = useRoute()
const id = route.params.keyword as string
const userInfo = JSON.parse(localStorage.getItem('users') as string)
// var socket = io.connect("http://127.0.0.1:80", {
//   auth: {
//     token: userInfo.token,
//   },
//   query: {
//     orderId: 1,
//   },
// });

// function getMsgHistory() {
//   //向socket服务端发送数据 参数：pageSize: number, lastTime: string, orderId: string
//   socket.emit('getChatMsgList', 20, '2024-07-30 ', id);
// }


// socket.on('chatMsgList', event => {
//   var str = document.getElementById('msgShowHistory').innerText;
//   var test = document.createElement('span');
//   // 返回的聊天记录信息
//   test.appendChild(document.createTextNode(JSON.stringify(event)));
//   var test2 = document.createElement('p');

//   document
//     .getElementById('msgShowHistory')
//     .appendChild(test)
//     .appendChild(test2);
// });
const data = ref()
const patientConsultOrderDetailOrderIdData = async () => {
  let res = await patientConsultOrderDetailOrderIdAPI(id)
  console.log(res);
  if (res.data.code === 10000) {
    data.value = res.data.data
    console.log(data.value);
  }
}
onMounted(() => {
  // getMsgHistory()
  patientConsultOrderDetailOrderIdData()
})
const time = computed(() => {
  if (data.value) {
    setTimeout(() => {
      data.value.countdown--
    }, 1000);
    const hours = Math.floor(data.value.countdown / 3600);
    const minutes = Math.floor((data.value.countdown % 3600) / 60);
    const seconds = data.value.countdown % 60;
    return `${useBuLing(hours)}:${useBuLing(minutes)}:${useBuLing(seconds)}`
  }
})
const liver = computed(() => {
  if (data.value?.liverFunction === 0) {
    return '肝功能正常'
  } else if (data.value?.liverFunction === 1) {
    return '肝功能异常'
  } else {
    return '肝功能不清楚'
  }
})
const renal = computed(() => {
  if (data.value?.renalFunction === 0) {
    return '肾功能正常'
  } else if (data.value?.renalFunction === 1) {
    return '肾功能异常'
  } else {
    return '肾功能不清楚'
  }
})
const allergicHistory = computed(() => {
  if (data.value?.allergicHistory === 0) {
    return '过敏史正常'
  } else if (data.value?.allergicHistory === 1) {
    return '过敏史异常'
  } else {
    return '过敏史不清楚'
  }
})
const fertilityStatus = computed(() => {
  if (data.value?.fertilityStatus === 0) {
    return '无'
  } else if (data.value?.fertilityStatus === 1) {
    return '备孕中'
  } else if (data.value?.fertilityStatus === 2) {
    return '已怀孕'
  } else {
    return '哺乳期'
  }
})
</script>
<template>
  <comScrollView class="box">
    <comNavigation>
      <template #title>
        <div class="title">
          医生问诊室
        </div>
      </template>
    </comNavigation>
    <div class="top">
      <div class="topP">
        <div class="left">{{ data?.statusValue }}</div>
        <div class="right">剩余时间{{ time }}</div>
      </div>
    </div>
    <div class="list">
      <div class="createTime">
        <div class="time">
          {{ data?.createTime }}
        </div>
      </div>
      <div class="userCard">
        <div class="userCardTop">
          <p>
            <span>{{ data?.patientInfo.name }}</span>
            <span>{{ data?.patientInfo.genderValue }}</span>
            <span>{{ data?.patientInfo.age }}岁</span>
          </p>
          <p>
            <!-- 肝脏功能 -->
          <div class="status">
            {{ liver }} | {{ renal }} | {{ allergicHistory }} | {{ fertilityStatus }}

          </div>
          </p>
        </div>
        <div class="userCardBottom">
          <p><span>病情描述</span> {{ data?.illnessDesc }}</p>
          <p><span>用药需求</span></p>
        </div>
      </div>
      <div class="tipsBox">
        <div class="tips">医护人员正在赶来,请耐心等候</div>
      </div>
      <div class="tipsBox">
        <div class="tips">
          <span>温馨提示：</span>
          在线咨询不能代替面诊,医护人员建议仅供参考
        </div>
      </div>
      <div class="userCard" style="margin: 0;">
        <div class="userCardTop">
          <p class="chufang">
            <span>电子处方</span>
            <span class="chu">原始处方 <comIcon name="icons-user-arrow"></comIcon></span>
          </p>
          <p>
            <!-- 肝脏功能 -->
          <div class="status">
            <span>{{ data?.patientInfo.name }}</span>
            <span>{{ data?.patientInfo.genderValue }}</span>
            <span>{{ data?.patientInfo.age }}岁</span>
            身体不适，请按照处方治疗
          </div>
          </p>
          <p>
          <div class="status">
            开方时间： {{ data?.createTime }}
          </div>
          </p>
        </div>
        <div class="userCardBottom">
        </div>
      </div>
      <div class="btnBox">
        购买药品
      </div>
    </div>
  </comScrollView>
</template>
<style scoped lang="scss">
.title {
  font-size: 16px;
}

.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  height: 44px;
  background-color: #fff;
  width: 100%;
  box-sizing: border-box;

  .topP {
    @extend .top;
    padding: 0;

    .left {
      font-size: 13px;
      color: #16c2a3;
    }

    .right {
      color: #121826;
    }
  }
}

.box {
  height: 100vh;
  background-color: #f6f7f9;

  .list {
    padding: 15px;

    .createTime {
      display: flex;
      align-items: center;
      justify-content: center;

      .time {
        display: inline-block;
        padding: 5px 16px;
        color: #848484;
        font-size: 12px;
        background-color: #ededed;
        border-radius: 25px;
        font-weight: 300;
      }
    }

    .userCard {
      position: relative;
      background-color: #fff;
      font-size: 16px;
      margin-bottom: 10px;
      border-radius: 10px;
      overflow: hidden;
      z-index: 10;

      .userCardTop {
        padding: 15px;
        border-bottom: 1px solid #eeeeee;

        p {
          margin: 0;

          span {
            margin-right: 5px;
          }

          .status {
            font-size: 12px;
            color: #848484;
          }
        }

        .chufang {
          display: flex;
          justify-content: space-between;

          .chu {
            font-size: 12px;
            display: flex;
            align-items: center;

          }
        }
      }

      .userCardBottom {
        font-size: 12px;
        padding: 15px;
      }

    }

    .btnBox {
      width: 100%;
      background-color: #eaf8f6;
      color: #16c2a3;
      font-size: 16px;
      padding: 18px 0 8px 0;
      text-align: center;
      margin-top: -10px;
    }

    .tipsBox {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: #848484;
      margin-bottom: 10px;

      .tips {
        padding: 5px 16px;
        background-color: #fff;
        border-radius: 20px;

        span {
          color: #16c2a3;
        }
      }
    }
  }
}
</style>
